<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/element-ui.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/jquery.md5.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="lib/element-ui.css"/>
    <link rel="stylesheet" type="text/css" href="css/ask.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <title>方案解决系统</title>
</head>
<body>
<div id="app">
    <header>
        <div class="header">
            <div><a href="/"><img class="img-logo" src="lib/logo1.png" alt=""></a></div>
            <div class="plane-login">
                <div v-show="islogin==0">
                    <a href="#" @click="showLoginWindow=true">登录</a> | <a href="">注册</a>
                </div>
                <div v-show="islogin==1">

                    <el-menu :default-active="menuActiveIndex" class="el-menu-demo" mode="horizontal">
                        <el-submenu index="2">
                            <template slot="title"><img
                                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt=""
                                    class="nav-avatar">{{userinfo.name}}
                            </template>
                            <el-menu-item index="2-1">个人中心</el-menu-item>
                            <el-menu-item index="2-2">设置</el-menu-item>
                            <el-menu-item index="2-3" @click="exit">退出登录</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </div>
            </div>
        </div>
    </header>
    <main>
        <div class="content">
            <div class="ask-title">
                <h1 v-cloak> {{askData.title}}</h1>
            </div>
            <div class="ask-meta">
                <div class="ask-meta-info">
                    <el-tag effect="dark" hit="true" style="border: none"
                            size="mini" :color="askData.classcolor">{{askData.classname}}
                    </el-tag>
                    <span class="ask-meta-span"><i class="el-icon-user-solid"></i> {{askData.username}}</span>
                    <span class="ask-meta-span ask-creattime"> <i class="el-icon-time"></i> {{askData.creattime}}</span>
                </div>
                <div class="ask-control" v-show="askData.userid==askData.own">
                    <i class="el-icon-edit-outline">编辑</i>
                    <i class="el-icon-delete" @click="delask">删除</i>
                </div>
            </div>
            <div class="ask-content" v-html="askData.content">

            </div>
        </div>
        <transition name="el-zoom-in-center">
            <div class="window-plane-login" v-show="showLoginWindow">
                <div class="box-mask"></div>
                <div class="box-login">
                    <div class="plane-login-title">
                        <div><b>登录账户</b></div>
                        <div @click="closeLoginPlane"><i class="el-icon-close close"></i></div>
                    </div>
                    <div class="box-login-form">
                        <div class="form-item">
                            <el-input v-model="form.user" placeholder="账号"></el-input>
                        </div>

                        <div class="form-item">
                            <el-input v-model="form.pass" placeholder="密码" show-password></el-input>
                        </div>
                        <div class="form-item form-set-right">
                            <a href="#">忘记密码</a> | <a href="#">无法登录</a>
                        </div>
                        <div class="form-item form-set-right">
                            <el-button type="primary" @click="login">登录</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </main>
    <footer class="fixed-bottom">
        <div class="plane-footer">
            方案解决系统 code by ghpym.com
        </div>
    </footer>
    <script>

        (function ($) {
            $.getUrlParam = function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            }
        })(jQuery);
        var vue = new Vue({
            el: '#app',
            mounted() {
                this.init()
            },
            data: {
                test: '啊啊啊',
                askData: {},
                form: {
                    user: '',
                    pass: ''
                },
                menuActiveIndex: 1,
                islogin: 0,
                userinfo: {
                    name: ''
                },
                showLoginWindow: false
            },
            methods: {
                init() {

                    if ($.getUrlParam('ask') == null) {
                        return;
                    }
                    var that = this;
                    $.get('/user/loginInfo.do', function (data) {
                        if (data != 0) {
                            var obj = JSON.parse(data);
                            that.islogin = 1;
                            that.userinfo.name = obj.username;
                        }
                    });
                    $.get('/post/getAsk.do', {id: $.getUrlParam('ask')}, function (data) {
                        if (data == null) {
                            console.log("无数据");
                            window.location.href = '/pages/error/404.html';
                        }
                        var obj = data;
                        obj.content = htmlDecode(obj.content);


                        let d = new Date(obj.creattime);
                        let date = (d.getFullYear()) + "-" +
                            (d.getMonth() + 1) + "-" +
                            (d.getDate()) + " " +
                            (d.getHours()) + ":" +
                            (d.getMinutes()) + ":" +
                            (d.getSeconds());
                        obj.creattime = date;
                        that.askData = obj;

                        console.log(obj);
                    })
                },
                delask() {
                    var that = this;
                    this.$confirm('此操作将永久删除方案, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.post("/post/delask", {id: that.askData.id}, function (data) {
                            var obj = JSON.parse(data);
                            if (obj.code == 0) {
                                this.$message({
                                    message: obj.msg,
                                    type: 'warning'
                                });
                            } else {
                                this.$message({
                                    message: obj.msg,
                                    type: 'success'
                                });
                                setTimeout(function () {
                                    window.location.href = "/";
                                }, 2000);

                            }

                        })
                    })
                }
            ,
            login() {
                that = this;
                $.post('/user/login.do', {user: that.form.user, pass: $.md5(that.form.pass)}, function (data) {
                    if (data == 1) {
                        that.$message({type: 'success', message: '登录成功'});
                        setTimeout(function () {
                            window.location.reload();
                        }, 3000);
                    } else {
                        that.$message({type: 'error', message: '账号或者密码错误'});
                    }

                })
            },
            exit() {
                that = this;
                $.get('/user/exit.do', function (data) {
                    if (data == 1) {
                        that.$message({message: '已退出'});
                        setTimeout(function () {
                            window.location.reload();
                        }, 1000);
                    } else {
                        that.$message({type: 'error', message: '退出失败'});
                    }
                })
            },
            closeLoginPlane() {
                this.showLoginWindow = false;
            }
        }
        })
        ;

        //Html解码获取Html实体
        function htmlDecode(value) {
            return $('<div/>').html(value).text();
        }
    </script>
</div>
</body>
</html>